<template>
	<view class="pit-avoidance-page">
		<!-- 1. 吸顶/固定头部 -->
		<view class="sticky-header" :class="{ 'is-sticky': isTabsSticky }" :style="{ paddingTop: statusBarHeight + 'px' }">
			<!-- 吸顶后一直显示的 top-bar -->
			<view class="top-bar" v-if="isTabsSticky">
				<view class="city-selector-sticky" @click="navigateToCitySelect">
					<text>淮安市</text>
					<u-icon name="/static/pit-avoidance/icon_down.png" color="#000" size="14"></u-icon>
				</view>
				<view class="search-icon-sticky" @click="navigateToSearch">
					<u-icon name="search" color="#000" size="24"></u-icon>
				</view>
			</view>
			<!-- 滚动到tabs后才显示的区域 -->
			<view class="sticky-tabs-wrapper" :class="{ 'is-visible': isTabsSticky }" v-if="isTabsSticky">
				<!-- 一级分类按钮 -->
				<view class="main-category-tabs">
					<view
						v-for="(tab, index) in subTabList"
						:key="index"
						class="main-tab-item"
						:class="{ 'active': currentSubTab === index }"
						@click="handleSubTabChange(index)"
					>
						<image :src="tab.icon" class="tab-icon" mode="aspectFit"></image>
						<text>{{ tab.name }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 2. 主滚动区域 -->
		<scroll-view scroll-y class="content-scroll-view" @scroll="handleScroll">
			<!-- 顶部非固定区域 (保持原样) -->
			<!-- 顶部非固定区域 -->
			<view class="non-sticky-header" :style="topBarStyle">
			    <image class="header-bg-image" src="/static/pit-avoidance/bg_top.png" mode="widthFix"></image>
				<view class="header-content-overlay">
			        <view class="location-bar">
			            <view class="city-selector" @click="navigateToCitySelect">
			                <u-icon name="/static/pit-avoidance/icon_dw.png" color="#000" size="18"></u-icon>
			                <view class="city-selector-name">淮安市</view>
			            </view>
			            <view class="search-icon-initial" @click="navigateToSearch">
			                <u-icon name="search" color="#000" size="24"></u-icon>
			            </view>
			        </view>
			        <image class="title-image" src="/static/pit-avoidance/title_kengyankengyu.png" mode="widthFix"></image>
			
			        <!-- 3D卡片轮播 -->
			        <swiper class="pit-swiper" circular :current="swiperCurrent" @change="e => swiperCurrent = e.detail.current" previous-margin="210rpx" next-margin="210rpx">
			            <swiper-item v-for="(item, index) in topSwiperList" :key="item.id">
			                <view class="swiper-item-wrapper" :class="{ 'is-active': index === swiperCurrent }">
			                    <image class="swiper-image" :src="item.image" mode="aspectFill"></image>
			                    <view class="swiper-title-overlay">{{ item.title }}</view>
			                </view>
			            </swiper-item>
			        </swiper>
			    </view>
			</view>

			<!-- 主内容区域 (全新改写) -->
			<view class="main-content-section">
				<!-- 这是吸顶效果的触发锚点 -->
				<view class="tabs-trigger-anchor" id="tabs-trigger-anchor">
					<!-- 筛选栏 -->
					<view class="filter-bar">
						<view class="city-selector" @click="navigateToCitySelect">
							<text>淮安市</text>
							<u-icon name="/static/pit-avoidance/icon_down.png" color="#000" size="14"></u-icon>
						</view>
						<view class="right-filters">
							<view class="filter-item">
								<text>位置距离</text>
								<u-icon name="arrow-down" color="#000" size="12" bold></u-icon>
							</view>
							<view class="filter-item priority">
								<text>避坑指数优先</text>
								<u-icon name="arrow-down" color="#000" size="12" bold></u-icon>
							</view>
						</view>
					</view>
					
					<!-- 一级分类按钮 -->
					<view class="main-category-tabs">
						<view
							v-for="(tab, index) in subTabList"
							:key="index"
							class="main-tab-item"
							:class="{ 'active': currentSubTab === index }"
							@click="handleSubTabChange(index)"
						>
							<image :src="tab.icon" class="tab-icon" mode="aspectFit"></image>
							<text>{{ tab.name }}</text>
						</view>
					</view>
				</view>
				
				<!-- 内容展示区域 (当前只做景点的) -->
				<view v-if="currentSubTab === 1" class="content-display-area">
					<!-- 轮播图 -->
					<view class="swiper-container">
						<u-swiper
							:list="bannerSwiperList"
							keyName="image"
							indicator
							indicatorMode="dot"
							indicatorActiveColor="#FBD13E"
							indicatorInactiveColor="rgba(255, 255, 255, 0.5)"
							:indicatorStyle="{ bottom: '20rpx',  right: '60rpx' }"
							height="100"
							radius="10"
							imgMode="aspectFill"
							circular
							@click="handleBannerSwiperClick"
						>
						</u-swiper>
					</view>
					
					<!-- 景点列表 -->
					<view class="spot-list">
						<view class="spot-item" v-for="(item, index) in spotList" :key="index" @click="navigateToDetail(item)">
							<!-- 背景图 -->
							<image class="item-bg" src="/static/item_bg.png"></image>
							<!-- 内容 -->
							<view class="item-content">
								<image class="spot-image" :src="item.image" mode="aspectFill"></image>
								<view class="spot-details">
									<text class="spot-name">{{ item.name }}</text>
									<view class="rating-line">
										<view class="rating-line-left">
											<text class="rating-label">避坑指数</text>
											<u-rate :count="5" v-model="item.rating" activeColor="#F66B2F" readonly size="16"></u-rate>
											<text class="rating-score">{{ item.rating.toFixed(1) }}</text>
										</view>
										<text class="rating-reviews">{{ item.reviews }}条</text>
									</view>
									<view class="tags-line">
										<view class="">
											<text class="tag-item">{{ item.category }}</text>
											<text class="tag-item">{{ item.district }}</text>
										</view>
										<text class="distance">{{ item.distance }}</text>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 其他分类的占位符 -->
				<view v-else class="placeholder-content">
					<text> {{subTabList[currentSubTab].name}} 分类内容待开发...</text>
				</view>
			</view>
		</scroll-view>
		<Tabbar :tabbar-index="1" />
		<PublishPopup :show="showPublishPopup" @close="showPublishPopup = false" />
	</view>
</template>

<script>
	import Tabbar from "@/components/tabbar/tabbar.vue";
	import PublishPopup from '@/components/PublishPopup/PublishPopup.vue'; 
export default {
	data() {
		return {
			showPublishPopup: false, // 控制弹窗的显示与隐藏
			statusBarHeight: 0,
			isHeaderSticky: false, 
			isTabsSticky: false,
			stickyTriggerTop: 0,
			currentSubTab: 1, // 默认选中"景点"
			subTabList: [
				{ name: '美食', icon: '/static/pit-avoidance/icon_food.png' },
				{ name: '景点', icon: '/static/pit-avoidance/icon_jd.png' },
				{ name: '交通', icon: '/static/pit-avoidance/icon_jt.png' },
				{ name: '酒店', icon: '/static/pit-avoidance/icon_hotel.png' },
				{ name: '体验', icon: '/static/pit-avoidance/icon_rw.png' }
			],
			swiperCurrent: 1, // 顶部3D轮播图的当前索引
			topSwiperList: [], // 顶部3D轮播图数据
			bannerSwiperList: [], // 景点内容区轮播图数据
			spotList: [] // 景点列表数据
		};
	},
	components: {
		Tabbar,
		PublishPopup,
	},
	computed: {
		topBarStyle() {
			// #ifdef MP-WEIXIN
			if (this.$store.state.systemInfo.capsuleInfo.width > 0) {
				const paddingRight = this.$store.state.systemInfo.capsuleInfo.width + this.$store.state.systemInfo.capsuleRightPadding * 2;
				const paddingTop = this.$store.state.systemInfo.statusBarHeight + this.$store.state.systemInfo.capsuleRightPadding;
				return `padding:${paddingTop}px ${paddingRight}px 10rpx 30rpx;`;
			}
			// #endif
			// #ifdef APP-PLUS || H5
			return `padding-top: ${this.$store.state.systemInfo.statusBarHeight}px;`;
			// #endif
			return '';
		}
	},
	onLoad() {
		// 监听全局弹窗事件
		uni.$on('togglePublishPopup', this.handleTogglePublishPopup);
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;
		this.loadInitialData();
	},
	onReady() {
		// 使用 nextTick 确保DOM渲染完成后再计算位置
		this.$nextTick(this.calculateStickyPosition);
	},
	onUnload() {
		// 移除事件监听，防止内存泄漏
		uni.$off('togglePublishPopup', this.handleTogglePublishPopup);
	},
	onHide() {
		// 当页面被隐藏时（例如切换Tab），强制关闭弹窗
		this.showPublishPopup = false;
	},
	onBackPress(options){
		// 优先关闭发布弹窗
		if (options.from === 'backbutton' && this.showPublishPopup) {
			this.showPublishPopup = false;
			return true; 
		}
		
		return false;
	},
	methods: {
		handleTogglePublishPopup() {
			// 这里需要判断当前页面是否是活动页面，避免后台页面也响应事件
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			// 确保只有当前显示的页面才打开弹窗
			if (currentPage.route === 'pages/tabBar/pit-avoidance/pit-avoidance') {
				this.showPublishPopup = !this.showPublishPopup;
			}
		},
		// 计算吸顶触发位置
		calculateStickyPosition() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#tabs-trigger-anchor').boundingClientRect(data => {
				if (data) {
					// 44是顶部吸顶bar的预估高度
					this.stickyTriggerTop = data.top - this.statusBarHeight - 44; 
				}
			}).exec();
		},
		// 监听滚动事件
		handleScroll(e) {
			const scrollTop = e.detail.scrollTop;
			this.isHeaderSticky = scrollTop > 10; // 稍微滚动就触发顶部栏吸顶
			if (this.stickyTriggerTop > 0) {
				this.isTabsSticky = scrollTop > this.stickyTriggerTop;
			}
		},
		// 加载所有页面的模拟数据
		loadInitialData() {
			// 顶部3D轮播图数据
			this.topSwiperList = [
				{ id: 'swp1', image: '/static/pit-avoidance/swp1.png', title: '里运河文化长廊' },
				{ id: 'swp2', image: '/static/pit-avoidance/swp2.png', title: '说实话, 河下千年古镇也就那样~' },
				{ id: 'swp3', image: '/static/pit-avoidance/swp3.png', title: '文庙古街道' }
			];
			// 内容区Banner轮播图数据
			this.bannerSwiperList = [
				{
					image: '/static/pit-avoidance/banner_aquarium.png',
					title: '本地熊榜单-淮安站'
				},
				{
					image: '/static/pit-avoidance/banner_aquarium.png',
					title: '探索更多精彩'
				}
			];
			// 景点列表模拟数据
			this.spotList = [
				{
					id: 1, name: '淮安市河下古镇', image: '/static/pit-avoidance/spot_hexia.png', rating: 4.5, reviews: 8412,
					category: '5A级景点/古镇', district: '淮安区', distance: '5.3km'
				},
				{
					id: 2, name: '淮安市西游乐园', image: '/static/pit-avoidance/spot_xiyou.png', rating: 4.0, reviews: 5615,
					category: '主题乐园', district: '清江浦区', distance: '6.8km'
				},
				{
					id: 3, name: '淮安市动物园', image: '/static/pit-avoidance/spot_zoo.png', rating: 3.5, reviews: 3691,
					category: '动物园', district: '清江浦区', distance: '9.8km'
				},
				{
					id: 4, name: '总督漕运部院遗址公园', image: '/static/pit-avoidance/spot_caoyun.png', rating: 3.0, reviews: 1527,
					category: '纪念公园', district: '淮安区', distance: '13.5km'
				},
				{
					id: 4, name: '古黄河湿地公园', image: '/static/pit-avoidance/spot_guhuanghe.png', rating: 3.6, reviews: 1527,
					category: '湿地公园', district: '清江浦区', distance: '4.5km'
				}
			];
		},
		// 切换一级分类
		handleSubTabChange(index) {
			if (this.currentSubTab === index) return;
			this.currentSubTab = index;
			// 切换后可根据需要加载不同数据
		},
		// 点击内容区轮播图
		handleBannerSwiperClick(index) {
			uni.showToast({
				title: this.bannerSwiperList[index].title,
				icon: 'none'
			});
		},
		navigateToDetail() { uni.navigateTo({ url: '/pages_sub/pit-avoidance/attraction-detail/attraction-detail' }); },
		navigateToCitySelect() { uni.navigateTo({ url: '/pages_sub/common/city/city-select' }); },
		navigateToSearch() { uni.navigateTo({ url: '/pages_sub/common/search-suggestions/search-suggestions' }); },
	}
};
</script>

<style lang="scss" scoped>
/* 页面基础 */
.pit-avoidance-page { 
	background-color: #F8F8F8; 
	height: 100vh;
	display: flex;
	flex-direction: column;
}

/* 吸顶头部样式 (来自原版) */
.sticky-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 998;
	background-color: transparent; transition: background-color 0.3s;
	&.is-sticky { 
		background-color: rgba(253, 246, 236, 0.95); 
		backdrop-filter: blur(10px); 
		box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05); 
	}
	.top-bar { 
		display: flex; align-items: center; justify-content: space-between; 
		padding: 20rpx 30rpx; 
		height: 44px;
		box-sizing: border-box;
		.city-selector-sticky { font-size: 32rpx; font-weight: bold; display: flex; align-items: center; text { margin-right: 8rpx; }}
	}
	.sticky-tabs-wrapper {
		background-color: #fff; border-radius: 40rpx 40rpx 0 0; 
		visibility: hidden; opacity: 0; transform: translateY(-100%); transition: all 0.3s;
		&.is-visible { visibility: visible; opacity: 1; transform: translateY(0); }
		.main-category-tabs { padding: 20rpx 30rpx; } // 为吸顶的tabs添加内边距
	}
}

/* 主滚动区 */
.content-scroll-view { flex: 1; height: 100%; }

/* 顶部非固定区域 (来自原版，微调) */
.non-sticky-header {
	position: relative; 
	// height: 480rpx;
    .header-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
    .header-content-overlay { position: relative; z-index: 2; padding: 30rpx 0; padding-top: var(--status-bar-height);}
	.title-image{
		width:80%;margin: -30rpx 0 40rpx 10%; height: 100rpx; display: block;
	}
	.location-bar { 
		display: flex; justify-content: space-between; align-items: center; 
		padding: 0 30rpx;
		.slogan-title {
			font-size: 40rpx;
			font-weight: bold;
			line-height: 1.2;
		}
	}
}

/* 3D卡片轮播 (来自原版) */
.pit-swiper {
	height: 190rpx; margin-top: 10rpx;
	.swiper-item-wrapper {
		height: 100%; transition: transform 0.3s, opacity 0.3s;
		transform: scale(0.85); opacity: 0.8;
		position: relative; border-radius: 12rpx; overflow: hidden;
		&.is-active { transform: scale(1); opacity: 1; }
		.swiper-image { width: 100%; height: 100%; }
		.swiper-title-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 10rpx 12rpx; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); color: #fff; font-size: 24rpx; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	}
}

/* 主内容区域 (全新) */
.main-content-section {
	min-height: 100vh; background-color: #fff; border-radius: 40rpx 40rpx 0 0;
	padding: 0 30rpx 40rpx; position: relative; z-index: 2;
	
	.tabs-trigger-anchor { 
		/* 这个元素本身不需要样式，只作为定位锚点 */
	}
}

/* 筛选栏 (全新) */
.filter-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;

	.city-selector {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		text { margin-right: 8rpx; }
	}

	.right-filters {
		display: flex; align-items: center; gap: 20rpx;
		.filter-item {
			display: flex; align-items: center; font-size: 26rpx; color: #000;
			&.priority { color: #DD524D; }
			text { margin-right: 4rpx; }
			.u-icon{
				padding-top: 8rpx;
			}
		}
	}
}

/* 一级分类按钮 (通用样式) */
.main-category-tabs {
	display: flex; justify-content: space-around; padding-bottom: 20rpx;
	.main-tab-item {
		display: flex; flex-direction: row; align-items: center; justify-content: center;
		padding: 10rpx 20rpx; border-radius: 36rpx; background-color: #F5F5F5;
		transition: all 0.2s;
		.tab-icon { width: 38rpx; height: 38rpx; margin-right: 6rpx; }
		text { font-size: 26rpx; color: #333; }
		&.active {
			background-color: #5C2D04;
			text { color: #fff; font-weight: bold; }
		}
	}
}


/* 内容展示区 (全新) */
.content-display-area {
	.swiper-container { margin-bottom: 30rpx; }
}

.placeholder-content {
	padding: 100rpx 0;
	text-align: center;
	color: #999;
}

/* 景点列表 (全新) */
.spot-list {
	display: flex; flex-direction: column; gap: 30rpx;
	.spot-item {
		position: relative; width: 100%; height: 170rpx; border-radius: 16rpx; overflow: hidden;
		background-image: url('/static/pit-avoidance/item_bg.png');background-size: 100% 100%;
		box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05); 
		.item-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
		.item-content {
			position: relative; z-index: 2; display: flex; align-items: center;
			height: 100%; box-sizing: border-box;

			.spot-image { width: 210rpx; height: 100%; border-radius: 20rpx; flex-shrink: 0; }
			.spot-details {
				display: flex; flex-direction: column; justify-content: space-around;
				flex: 1; height: 100%; margin-left: 30rpx; color: #333;margin-right: 20rpx;

				.spot-name { font-size: 32rpx; font-weight: bold; }
				.rating-line {
					display: flex; align-items: center; justify-content: space-between;
					.rating-line-left{
						display: flex;
						align-items: center;
					}
					.rating-label { font-size: 24rpx; color: #666; margin-right: 10rpx; }
					.rating-score { font-size: 28rpx; font-weight: bold; color: #F66B2F; margin: 0 10rpx; }
					.rating-reviews { font-size: 24rpx; color: #666; }
				}
				.tags-line {
					display: flex; align-items: center;justify-content: space-between;
					.tag-item { color: #666; font-size: 22rpx; margin-right: 20rpx; border-radius: 6rpx; }
				}
				.distance { font-size: 24rpx; color: #000; align-self: flex-end; }
			}
		}
	}
}

</style>